<template>
	<view class="card-container">
		<view class="card-main">
			<uni-row>
				<uni-col
					v-for="(c, i) in columns.slice(0, showCount)"
					:span="c.span || 24"
					:key="c.prop"
					:style="{
						display: c.visible !== false ? 'block' : 'none',
					}"
				>
					<view>
						<view v-if="c.formType == 'select'">
							{{ c.label }}:
							{{
								(
									c.options.find(
										(op) => op.value == data[c.prop],
									) || {}
								).label ||
								c.defaultValue ||
								'-'
							}}
						</view>
						<view v-else-if="c.formType == 'selectTree'">
							{{ c.label }}:
							{{ findTreeName(c.options, data[c.prop]) || '-' }}
						</view>
						<!-- 自定义内容 -->
						<template v-else-if="c.slotName">
							<slot :name="c && c.slotName" :row="data"></slot>
						</template>
						<view class="labelValue" v-else>
							<view class="label-item">
								<text>{{ c.label }}: </text>
								<text> {{ data[c.prop] || '-' }}</text>
							</view>
						</view>
					</view>
				</uni-col>
				<uni-col
					v-if="expand"
					v-for="(c, i) in columns.slice(showCount, columns.length)"
					:span="c.span || 24"
					:key="c.prop"
					:style="{
						display: c.visible !== false ? 'block' : 'none',
					}"
				>
					<view>
						<view v-if="c.formType == 'select'">
							{{ c.label }}:

							{{
								(
									c.options.find(
										(op) => op.value == data[c.prop],
									) || {}
								).label || '-'
							}}
						</view>
						<view v-else-if="c.formType == 'selectTree'">
							{{ c.label }}
							{{ findTreeName(c.options, data[c.prop]) || '-' }}
						</view>
						<!-- 自定义内容 -->
						<template v-else-if="c.slotName">
							<slot :name="c && c.slotName" :row="data"></slot>
						</template>
						<view class="labelValue" v-else>
							<view class="label-item">
								<text>{{ c.label }}: </text>
								<text> {{ data[c.prop] || '-' }}</text>
							</view>
						</view>
					</view>
				</uni-col>
			</uni-row>
		</view>

		<view
			class="trigger"
			v-if="columns.length > showCount"
			@click.stop="expand = !expand"
		>
			{{ expand ? '收起' : '点击查看更多' }}
			<!-- <uni-icons type="left" size="20" :class="expand ? 'expand' : ''" @click="expand = !expand"></uni-icons> -->
		</view>
	</view>
</template>

<script>
import { findTreeName } from '@/utils/utils.js';
export default {
	name: 'DescCard',
	props: {
		disabled: {
			type: Boolean,
			default: false,
		},
		columns: {
			type: Array,
			default: () => [],
		},
		data: {
			type: Object,
			default: () => ({}),
		},
		showCount: {
			type: Number,
			default: 12,
		},
		showExpand: {
			type: Boolean,
			default: true,
		},
	},
	data() {
		return {
			expand: false,
		};
	},
	methods: {
		findTreeName,
	},
};
</script>

<style lang="scss" scoped>
.card-container {
	padding: 16rpx;

	&.large {
		padding: 16rpx 0;
		padding-bottom: 0;
	}

	.card-main {
		color: #666;

		> .uni-row {
			> .uni-col {
				margin-bottom: 6rpx;
				padding-top: 0;
				padding: 6rpx 0;

				.active {
					color: #18a5f0;
					text-decoration: underline;
				}

				.labelValue {
					display: flex;
					align-items: center;

					.label-item {
						> uni-text:first-child {
							margin-right: 4px;
						}
					}
				}
			}
		}
	}

	.trigger {
		display: flex;
		justify-content: center;

		.uni-icons {
			color: #cccccc !important;
			transform: rotateZ(-90deg);

			&.expand {
				transform: rotateZ(90deg);
			}
		}
	}
}
</style>
